<template>
  <div style="position: inherit">

    <div class="cp-modal-mask" v-show="show" @click.stop="close"></div>
    <div class="cp-modal"  :class="show ? 'cp-modal-active' : ''" :style="{'z-index': zIndex}">
        <slot name="body"></slot>
    </div>
  </div>
</template>

<script>
  import {addClass, removeClass, getScrollview, pageScroll, isIOS,} from '../../assets/utils/assist';
  import {switchDomClasses} from '../../utils/clsUtil';
  export default {
    name: 'cp-class-modal',
    data() {
      return {
        show: this.value,
        selectedParent:{},
        selectedChild:{},
      }
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      cancel: String,
      modalTop:{
        type:String,
        default:""
      }
    },
    watch: {
      value(val) {
        if (isIOS) {
          if (val) {
            pageScroll.lock();
            addClass(this.scrollView, 'g-fix-ios-overflow-scrolling-bug');
          } else {
            pageScroll.unlock();
            removeClass(this.scrollView, 'g-fix-ios-overflow-scrolling-bug');
          }
        }
        this.show = val;
        switchDomClasses($(".icon-toggle"),"caret-toggle-trans" ,"caret-toggle-reset");
        if(val){//打开的时候
          this.zIndex = 1502;
          this.$emit("modal-show",zIndex);
        }else {//关闭的时候
          this.zIndex = -1;
        }
      }
    }, methods: {
      close() {
        isIOS && removeClass(this.scrollView, 'g-fix-ios-overflow-scrolling-bug');
        this.zIndex = -1;
        this.$emit('input', false);
//        $("li").removeClass("selected");
      },
      chooseParent:function (obj,tar) {
        $(tar).parent().find("li").removeClass("selected");
        $(tar).addClass("selected");
        this.cpNexts= [];
        this.cpNexts = obj;
        this.selectedParent = obj;
      },
      selectChild:function (obj,tar) {
        $(".list-span").removeClass("selected");
        $(tar).addClass("selected");
        this.$emit("select-one-way",obj);
        this.close();
      }
    },
    destroyed() {
      this.close();
      pageScroll.unlock();
      this.zIndex = -1;
    },
    mounted() {
      this.scrollView = getScrollview(this.$el);
    },
    computed:{
      zIndex:{
        get:function () {
          return this.value? 1502:-1;
        },
        set:function () {

        }
      }
    }
  }

</script>
<style>
  .caret-toggle-reset {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
  }
  .caret-toggle-trans {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
  }
  .cp-modal-mask {
    background-color: #939189;
    right: 0;
    top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    z-index: 1502;
    bottom: 0;
    left: 0;
  }
  .cp-modal{
    position: fixed;
    background-color: #fff;
    /*z-index: 1502;*/
    /*top: 0.5rem;*/
    /*top: 2.85em;*/
    top:0;
    left: 0;
    right: 0;
    width: 100%;
    /*display: flex;*/
  }
  .cp-modal-active {
    transform: translate(0, 1.1rem);
    transition: transform 0.3s;
    /*top:1.2rem;*/
  }

  .cp-modal-item{
    width: 100%;
    text-align: center;
    color: #000;

    font-size: 2em;
  }
  .cp-modal-item-li{
    color: #666;
    padding: 0.4em;
    padding-left: 0.8em;
    padding-right: 0.8em;
    border: 1px solid #ddd;
    font-size: 1.2em;
    text-align: center;
    display: inline-table;
    margin-bottom: 0.6em;
    border-radius: 0.2em;
  }
  .cp-modal ul li{
    margin: .3em;
  }
  .cp-list-first{
    /*margin-left: .8em;*/
    padding-bottom: .9em;
    padding-top: .6em;
    box-shadow: 0 2px 10px rgba(41,41,41,.08);

  }
  .cp-list-first .cp-modal-item-li{
    margin-left: 0.6em;
  }
  .cp-modal-item-next{
  }
  .list-group{
    padding: 1em;
    border-bottom: 1px dotted #ddd;
  }
  .list-span{
    padding: 0.6em;
    display: inline-table;
    color: #666;
    border: 1px solid #ddd;
    border-radius: .3em;
    margin-left: 0.6em;
    margin-bottom: 0.6em;
  }
  .selected{
    background: #dc3b40;
    border: 1px solid #dc3b40;
    color: #fff;
  }
</style>
